@charset "utf-8";

@import "common/reset";
@import "common/common"; 
 
.web{
    .slide_main{
        //轮播图S
        .slideshow{
            position: relative;
            ul{
                height: 406px;
                width: 100%;
                li{
                    height: 406px;
                     width: 100%;
                    float: left;
                    position: absolute;
                    a{
                       img{
                            height: 100%;
                            width: 100%;
                            opacity: 0;
                            transition: all 1s ease-in-out; 
                        } 
                    }
                    
                }
            }
            &:hover>.previous,&:hover>.next{
                display: block;
                transition: all 1s ease-in; 
            }
            .previous,.next{//左右切换按钮
                display: none;
                position: absolute;
                width: 41px;
                height: 69px;
                line-height: 69px;
                top: 50%;
                cursor: pointer;
                transform: translateY(-50%);
                background: rgba(0,0,0,.4);
                .iconfont{
                    font-size: 32px;
                    color: #fff;
                    
                }
                &:hover{
                   background: rgba(0,0,0,.6); 
                }
                
            }
            .previous{
                    left: 0;
            }
            .next{
                right: 0;
            }            
            
            .btn_slide{//圆点按钮
                position: absolute;
                left: 50%;
                bottom: 30px;
                z-index: 5;
                span{
                    cursor: pointer;                   
                    margin-left: 6px;
                    display: inline-block;
                    height: 10px;
                    width: 10px;
                    border-radius: 50%;
                    background: #383838;
                }
                .on{
                    background: #fffcf2;
                }
            }                      
        }
        //轮播图E
        
         //侧边栏
        .sidebar{
            position: relative;            
            .sidebar_last{
                 position: absolute;
                 top: -406px;
                 float: left;
                 width: 190px;
                 height: 406px;
                 background:#fff;
                 ul{
                     li{
                        border-bottom: 1px solid #C2C2C2;
                        font-size: 15px;
                        height: 40.6px;
                        line-height: 40.6px;
                        position: relative;
                        &:hover{
                            background: #f7f7f7;
                        }
                        a{
                            text-decoration: none;
                            display: inline-block;
                            height: 100%;
                            width: 100%;
                            color: #000;
                            padding-left:18px;
                            &:hover{
                                color: #e2231a;                                
                            }
                            .iconfont{
                                position: absolute;
                                right: 15px;
                            }                           
                        }
                        .list_all{
                            z-index: 98;
                            width: 934px;
                            height: 406px;
                            position: absolute;
                            left: 188px;                           
                            background: #f7f7f7;
                            display: none;
                            padding: 0 22px 20px 52px;
                            font-size: 12px;
                            &:hover~a{
                                color: #e2231a;
                            }  
                            .list_left{
                                margin-top: 20px;
                                width: 603px;
                                float: left;
                                height: 100%;                          
                                .list_it{
                                    margin-top: 5px;
                                    p{
                                        a{
                                            display: inline;
                                            height: 0;
                                        }
                                    }                                    
                                    ul{
                                        margin-left: 65px;
                                        margin-right: 45px;
                                        margin-top: -8px;
                                        border-bottom: 1px solid #C2C2C2;
                                        position: relative;
                                        li{
                                            float: left;
                                            border: none;
                                            height:20px; 
                                            line-height:15px;
                                            padding-bottom: 15px;
                                            a{
                                                font-size: 12px;
                                                display: inline;
                                                padding:0 14px 5px 14px;
                                            }
                                            &:hover{
                                                background: none;
                                            }
                                            em{
                                                height: 12px;
                                                width: 1px;
                                                background:#ccc;
                                                display: inline-block;
                                            }
                                        }
                                    }
                                }
                            }
                            .list_right{
                                margin-top: 17px;
                                width: 252px;
                                padding-right: 50px;
                                height: 100%;
                                float: right;
                                .list_img{
                                     height: 160px;
                                    line-height: 160px;
                                    margin-bottom: 8px;
                                    a{
                                        padding-left: 0;
                                        display: inline-block;
                                    }
                                    img{
//                                      height: 100%;
                                        width: 252px;
                                        height: 160px;
                                    }
                                }
                            }
                        }
                        .t1{
                            top: 0px;
                        }
                        .t2{
                            top: -40.6px;
                        }
                        .t3{
                            top: -81.2px;
                        }
                        .t4{
                            top: (-40.6)*3px;
                        }
                        .t5{
                            top: (-40.6)*4px;
                        }
                        .t6{
                            top: (-40.6)*5px;
                        }
                        .t7{
                            top: (-40.6)*6px;
                        }
                        .t8{
                            top: (-40.6)*7px;
                        }
                        .t9{
                            top: (-40.6)*8px;
                        }
                        .t10{
                            top: (-40.6)*9px;
                        }
                        &:hover .list_all{
                            display: block;
                        }
                    }
                 }
            }
            .list_sidebar{
                position: absolute;
                 top: 0px;
                 float: left;
                 width: 190px;
                 height: 406px;
                 background:#fff;
                 display: none;
                 z-index: 99;
                 border-left: 1px solid #BBBBBB;
            }
         }
    }
    .iocn_tall{  
            
        .icon_btn{
            ul{   
                width: 100%;
                margin: 0 auto; 
                text-align: center; 
                padding: 20px 0 25px 0; 
                border-bottom: 1px solid #C2C2C2;     
                li{
                    padding: 0 24px;
                    display: inline-block;
                    text-align: center;
                    font-size: 12px;
                    a{
                        color: #A9A9A9;
                        .iconfont{
                            font-size: 32px;
                        }
                        &:hover{
                            color: #555;
                        }
                        &:hover .iconfont{
                            color: #EF1C22;
                        }
                    }
                }
            }
        }
        .ic_img{
            text-align: center;
            margin: 15px 0;
            ul{
                width: 100%;
                margin: auto;
                .li_contorl{
                    margin: 0 18px;
                }
                li{
                    width: 388px;
                    height: 140px;
                    overflow: hidden;
                    float: left;
                         
                    img{
                        transition: all .5s ease-in-out;  
                        &:hover{
                            transform: scale(1.1);
                           
                        }                  
                    }
                   
                }
                
            }
        }
        .index_title{
            height: 42px;
            line-height: 42px;
            .title_left{
                font-size: 20px;
            }
            .title_right{
                em{
                    height: 15px;
                    width: 15px;
                    line-height: 12px;
                    text-align: center;
                    border: 1px solid #A9A9A9;
                    display: inline-block;
                    cursor: pointer;
                    .iconfont{
                        font-size: 10px;
                        vertical-align: middle;
                        color: #9E9E9E;
                    }
                }
                .btn_right{                   
                    margin-left: 6px;
                }
                
            }
        }
        .btn_change_img{
            padding-bottom: 35px;
            overflow: hidden;
            ul{
                white-space: nowrap;
                font-size: 0;
                transition: all .8s ease-in-out;
                li{
                    width: 200px;
                    height: 297px;
                    border: 1px solid #e6e6e6;
                    text-align: center;
                    display: inline-block;
                    position:relative;
                    
                    &:hover{
                        border-top:1px solid  #EF1C22;
                    }
                    img{
                        margin-top: 5px;
                        margin-bottom: 20px;
                    }
                    p{
                        width: 179px;
                        line-height: 20px;
                        font-size: 13px;
                        margin: 0 5px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;                   
                    }
                    .recommend_t{
                        a{
                            color: #000;
                            width: 185px;
                            display: block;
                        }
                    }
                    .recommend_w{
                        a{
                            color: #6f7170;
                        }
                    }
                    .price{
                        a{
                            color: #e2231a;
                        }
                    }
                    .hot_san{
                        height: 54px;
                        width: 54px;
                        background: red;
                    }
                }
            }
        }       
    }
    .details{
        background: #f5f5f5;
        padding: 30px 0;
        .details_title{
            height: 48px;
            line-height: 48px;
            .title_left{
                font-size: 20px;
            }
            .title_right{
                font-size: 12px;
                a{
                    color: #6f7170;
                    margin-left: 15px;
                    height: 42px;
                    line-height: 42px;
                    padding-top: -15px;
                    em{
                        display: inline-block;
                        height: 15px;
                        width: 15px;
                        border: 1px solid #A9A9A9;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 15px;
                        .iconfont{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        //动态图片S
        .inside{
            width: 100%;
            margin-bottom: 30px;
            
            .inside_left{
                width: 240px;
                height: 535px;
                overflow: hidden;
            }
            .inside_right{
                width: 960px;
                border-top:1px solid #dedede;
                ul{                 
                    li{
                        position: relative;
                        float: left;
                        width: 240px;
                        height: 267px;
                        text-align: center;
                        border-right: 1px solid #dedede;
                        border-bottom: 1px solid #dedede;
                        background: #fff;
                        img{
                            padding: 10px 0;
                            transition: all .7s ease-in-out;
                            &:hover{
                                transform: translateX(20px);
                            } 
                        }
                        p{
                        width: 222px;
                        line-height: 22px;
                        font-size: 13px;
                        margin: 0 5px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;                   
                        }
                        .recommend_t{
                            a{
                                color: #000;
                                font-size: 14px;
                            }
                        }
                        .recommend_w{
                            a{
                                color: #6f7170;
                            }
                        }
                        .price{
                            a{
                                color: #e2231a;
                            }
                        }
                        .hot_san{
                            border-left: 27px solid transparent;
                            border-bottom:  27px solid transparent;
                            border-right: 27px solid #e2231a;
                            border-top: 27px solid #e2231a;
                            position: absolute;
                            right: -1px;
                            top: 0;
                            font-size: 16px;                             
                        }
                        .hot_green{
                            border-left: 27px solid transparent;
                            border-bottom:  27px solid transparent;
                            border-right: 27px solid #22ac38;
                            border-top: 27px solid #22ac38;
                            position: absolute;
                            right: -1px;
                            top: 0;
                            font-size: 16px; 
                        }
                        .hot_yellow{
                            border-left: 27px solid transparent;
                            border-bottom:  27px solid transparent;
                            border-right: 27px solid #f39800;
                            border-top: 27px solid #f39800;
                            position: absolute;
                            right: -1px;
                            top: 0;
                            font-size: 16px; 
                        }
                        .hot_buy{
                            color: #fff; 
                            transform: rotate(45deg);
                            margin-top: -20px;
                            margin-right: -20px;
                            position: absolute;
                            right: 22px;
                            top: 27px;
                            font-size: 16px;
                            font-weight: bold;
                        }
                        
                    }
                }
            }
        }
        .seven_firend{
            ul{
                li:last-child{
                    margin-right: 0px;
                }
                li{
                    position: relative;
                    float: left;
                    width: 190px;
                    height: 212px;
                    margin-right: 12px;
                    transition: all .6s ease-in-out;
                    overflow: hidden;
                    &:hover{
                       box-shadow: 0 0 20px #000;                       
                    }  
                     &:hover>.firend_mark{  
                        bottom:0;         
                    }
                    .firend_mark{
                       transition: all .6s ease-in-out;   
                       height: 40px;
                       width: 100%;  
                       position: absolute;
                       left: 0;
                       bottom: -40px;
                       background: rgba(0,0,0,.4);
                       .mark_text{
                           color: #fff;
                           padding: 6px 10px 0 10px;
                           .fl{
                               span{
                                   font-size: 20px;
                                   padding-top: 3px;
                                   display: inline-block;
                               }
                               .iconfont{
                                   font-size: 30px;
                               }
                           }
                           .fr{
                               span{
                                   font-size: 14px;
                                   padding-top: 8px;
                                   display: inline-block;
                               }
                           }
                       }
                    }                    
                }
            }
        }
    }
    .logn_in{
        position: fixed;
        width: 100%;                       
        background:rgba(0,0,0,.4);
    }
}
